<template>
    <BoxTitle>
        <template #title>
            <p>未来15天游客量趋势图</p>
        </template>
        <template #content>
            <div class="charts" ref="line"></div>
        </template>
    </BoxTitle>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
import BoxTitle from './slot/boxtitle.vue'
let line = ref()

onMounted(() => {
    let myechart = echarts.init(line.value)
    myechart.setOption({
        // title:{
        //     text: '游客访问量趋势图'
        // },
        xAxis: {
            type: 'category',
            // 两侧不留白
            boundaryGap: false,
            // 去掉分割线
            splitLine: {
                show: false
            },
            // 去轴线
            axisLine:{
                show: false
            },
            // 去刻度
            axisTick:{
                show: false
            }
        },
        yAxis: {
            // 去掉分割线
            splitLine: {
                show: false
            },
            // 轴线
            axisLine:{
                show: true
            },
            // 刻度
            axisTick:{
                show: true
            }
        },
        grid: {
            left: 70,
            right: 40,
            top: 20,
            bottom: 30
        },
        series: [
            {
                type: 'line',
                data: [0, 273, 385, 269, 1524, 233, 153, 604, 340, 886, 1743, 482, 930, 194, 541, 412],
                // 设置平滑曲线
                smooth: true,
                // 区域填充样式
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'orange' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                        }],
                    }
                }
            }
        ]
    })
})
</script>

<style scoped type="scss">
.charts {
    height: calc(100% - 40px);
}
</style>